<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/reverse.html -->

    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>天地图反向镂空区域</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 1000px;
        margin: 0px;
      }
      .page-map {
        width: 100%;
        height: 100%;
        position: fixed;
      }
    </style>

    <style>
      .tdt-infowindow-content-wrapper,
      .tdt-infowindow-tip {
        background: transparent !important;
        box-shadow: none !important;
      }
      /* tdt-infowindow-content-wrapper 样式 */

      /* tdt-infowindow-tip 样式 */
      .tdt-infowindow-tip {
        background: none;
      }

      /* dialog-body 样式 */
      .dialog-body {
        padding: 5px 10px;
      }

      /* dialog-body1 样式 */
      .dialog-body1 {
        width: 235px;
        height: 204px;
        background: url(../img/m2.png) no-repeat;
        background-size: 100% 100%;
      }

      /* dialog-body2 样式 */
      .dialog-body2 {
        width: 235px;
        height: 204px;
        background: url(../img/m2.png) no-repeat;
        background-size: 100% 100%;
      }

      /* tdt-infowindow 样式 */
      .tdt-infowindow {
        bottom: 0 !important;
      }

      /* tdt-infowindow-tip 样式 */
      .tdt-infowindow-tip {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: none;
      }

      /* tdt-container .tdt-infowindow-tip-container 样式 */
      .tdt-container .tdt-infowindow-tip-container {
      }

      /* tdt-infowindow-content 样式 */
      .tdt-infowindow-content {
        font-size: 14px;
        color: #fff;
        padding: 4px 14px !important;
        margin: 0 0 0 -50px !important;
        width: 470px !important;
        display: flex;
      }

      /* dialog-head 样式 */
      .dialog-head {
        display: flex;
        justify-content: space-between;
        height: 38px;
        line-height: 38px;
      }

      /* dialog-body 内部样式 */
      .dialog-body {
        display: block;
        align-items: center;
      }
      .avatar {
        width: 130px;
        margin-right: 10px;
      }

      .content {
        width: 240px;
      }
      .tdt-container a {
        padding: 5px 5px !important;
      }

      .item {
        margin: 15px 0 17px;
        display: block;
        width: 100%;
        float: left;
        line-height: 16px;
      }

      .label {
        width: auto;
        display: block;
        float: left;
        color: #b6c1d4;
      }

      .value {
        width: auto;
        color: #f7faff;
        display: block;
        float: left;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script
      src="https://api.tianditu.gov.cn/api?v=4.0&tk=0ae8ed20bc75ab1e50aed5c12bdac0d4"
      type="text/javascript"
    ></script>
  </head>

  <body>
    <div id="app"><div class="page-map" id="map"></div></div>

    <script type="module">
      const { createApp, ref, onMounted } = Vue;
      import { mapList } from "../json/map.js";
      import { mapPoint } from "../json/mapPoint.js";
      const icon = "../img/marker.png";
      const iconOn = "../img/marker_on.png";
      const pic = "../img/mapBg.jpg";
      createApp({
        setup() {
          // 地图
          const map = ref();
          const mrkerList = ref([]);
          const markerClusterer = ref();

          // 初始化地图
          const initMap = () => {
            var T = window.T;
            map.value = new T.Map("map");
            map.value.centerAndZoom(new T.LngLat(119.46823, 33.23982), 11);
            var ctrl = new T.Control.MapType({
              position: T_ANCHOR_BOTTOM_RIGHT,
            });
            map.value.addControl(ctrl);
            map.value.setMapType(TMAP_HYBRID_MAP);
            // map.value.addEventListener("click", function(e){
            //   console.log(e.lnglat.getLng()+','+e.lnglat.getLat());
            // });
            drawProvince();
          };

          const convertCoordinates = (rawCoordinates) => {
            // 分割字符串，获取每个坐标对
            const pairs = rawCoordinates.split(";");
            // 处理每个坐标对，转换成 [longitude, latitude] 格式的数组
            const formattedCoordinates = pairs.map((pair) => {
              const [longitude, latitude] = pair.split(",").map(Number);
              return [longitude, latitude];
            });
            return formattedCoordinates;
          };
          // 调用函数并输出结果
          const result = convertCoordinates(mapList.points);

          // 绘制地图
          const drawProvince = () => {
            map.value.clearOverLays();
            if (markerClusterer.value != null) {
              markerClusterer.value.clearMarkers();
            }
            var T = window.T;
            var outer = [
              new T.LngLat(0, 0),
              new T.LngLat(0, 180),
              new T.LngLat(180, 180),
              new T.LngLat(180, 0),
            ];
            var pointView = [];
            var polygons = [outer];

            // nxCity.features.forEach((polygon, index) => {
            // polygon.geometry.coordinates.forEach((item) => {
            const pointArray = [];
            result.forEach((point) => {
              pointArray.push(new T.LngLat(point[0], point[1]));
              pointView.push(new T.LngLat(point[0], point[1]));
            });
            var polygonCity = new T.Polygon(pointArray, {
              color: "#0BF9FE",
              weight: 3,
              opacity: 1,
              fillColor: "#0BF9FE",
              fillOpacity: 0,
            });
            map.value.addOverLay(polygonCity);
            polygons.push(pointArray);
            // })
            // })
            // if (clickType.value == 'area') {
            // map.value.centerAndZoom(new T.LngLat(106.20483, 37.46791), 8)
            // }
            var polygon = new T.Polygon(polygons, {
              color: "#f0a10c",
              weight: 3,
              opacity: 1,
              fillColor: "#1f150b",
              fillOpacity: 0.9,
            });
            map.value.addOverLay(polygon);
            drawMarker();
          };

          //定位点
          const drawMarker = async () => {
            var T = window.T;
            const data = mapPoint.points;
            mrkerList.value = data;
            var iconUrl = new T.Icon({
              iconUrl: icon,
              iconSize: new T.Point(32, 32),
              iconAnchor: new T.Point(32, 32),
            });
            var iconUrlOn = new T.Icon({
              iconUrl: iconOn,
              iconSize: new T.Point(32, 32),
              iconAnchor: new T.Point(32, 32),
            });
            var arrayObj = [];

            var markerInfoWin = new T.InfoWindow();
            mrkerList.value.forEach((item, index) => {
              // console.log(item.lat, item.lng)
              var marker = new T.Marker(new T.LngLat(item.lng, item.lat), {
                icon: iconUrl,
              });
              arrayObj.push(marker);
              marker.addEventListener("click", function (e) {
                // console.log(mrkerList.value[index])
                map.value.panTo(e.lnglat);
                marker.setIcon(iconUrlOn);
                var sContent = `
                  <div class="dialog-body dialog-body1">
                    <div class="dialog-top" style="">主体信息</div>
                    <div class="intro">
                      <div class="item">
                        <div class="label">名称：</div>
                        <div class="value">${item.enterpriseName}</div>
                      </div>
                      <div class="item" style="margin: .1rem 0 .05rem;">
                        <div class="label">地址：</div>
                        <div class="value">江苏省扬州市邗江区杨庙镇沿山河村西庄组2号</div>
                      </div>
                      <div class="item">
                        <div class="label">地块总面积：</div>
                        <div class="value">${
                          item.landArea
                        }亩</div> <div class="label" style="margin-left: .1rem;"></div>
                        <div class="value"></div>
                      </div>
                      <div class="item" style="margin: .1rem 0 .03rem;">
                        <div class="label">主要农作物：</div>
                        <div class="value">水稻、小麦</div>
                      </div>
                      <div class="item">
                        <div class="label">信用分：</div>
                        <div class="value">${item.id == 6 ? "86" : ""}${
                  item.id == 7 ? "610" : ""
                }${
                  item.id == 8 ? "585" : ""
                }</div><a href="https://ryb.ruifengcloud.com/admin/#/reportPreviewH5" target="_blank" class="label" style="background: #ef9c00;
          padding: .02rem .05rem;
          color: #fff;
          border-radius: .1rem;
          margin: -0.02rem .15rem 0;
          float: right;
          cursor: pointer;text-decoration: none;">信用报告</a>
                      </div>
                    </div>
                  </div>

                            <div class="dialog-body dialog-body2">
                    <div class="dialog-top" style="">地块信息 </div>
                    <div class="intro">

                     <img src="${pic}" style="height: 145px;width: 200px;margin: 10px 0 0;border: 2px solid #f9f9f9;
          border-radius: 2px;"/>
                    </div>
                  </div>

                `;
                // var markerInfoWin = new T.InfoWindow(sContent, { offset: new T.Point(-10, -10) })
                markerInfoWin.setContent(sContent);
                markerInfoWin.addEventListener("close", function () {
                  marker.setIcon(iconUrl);
                });
                marker.openInfoWindow(markerInfoWin, e.lnglat);
              });
              //  默认打开
              if (index == 0) {
                map.value.centerAndZoom(new T.LngLat(item.lng, item.lat), 18);
                // ${item.contactAddress}
                var sContent = `
                  <div class="dialog-body dialog-body1">
                    <div class="dialog-top" style="">主体信息</div>
                    <div class="intro">
                      <div class="item">
                        <div class="label">名称：</div>
                        <div class="value">${item.enterpriseName}</div>
                      </div>
                      <div class="item" style="margin: .1rem 0 .05rem;">
                        <div class="label">地址：</div>
                        <div class="value">江苏省扬州市邗江区杨庙镇沿山河村西庄组2号</div>
                      </div>
                      <div class="item">
                        <div class="label">地块总面积：</div>
                        <div class="value">${
                          item.landArea
                        }亩</div> <div class="label" style="margin-left: .1rem;"></div>
                        <div class="value"></div>
                      </div>
                      <div class="item" style="margin: .1rem 0 .03rem;">
                        <div class="label">主要农作物：</div>
                        <div class="value">水稻、小麦</div>
                      </div>
                      <div class="item">
                        <div class="label">信用分：</div>
                        <div class="value">${item.id == 6 ? "86" : ""}${
                  item.id == 7 ? "610" : ""
                }${
                  item.id == 8 ? "585" : ""
                }</div><a href="https://ryb.ruifengcloud.com/admin/#/reportPreviewH5" target="_blank" class="label" style="background: #ef9c00;
          padding: .02rem .05rem;
          color: #fff;
          border-radius: .1rem;
          margin: -0.02rem .15rem 0;
          float: right;
          cursor: pointer;text-decoration: none;">信用报告</a>
                      </div>
                    </div>
                  </div>

                            <div class="dialog-body dialog-body2">
                    <div class="dialog-top" style="">地块信息 </div>
                    <div class="intro">

                     <img src="${pic}" style="height: 145px;width: 200px;margin: 10px 0 0;border: 2px solid #f9f9f9;
          border-radius: 2px;"/>
                    </div>
                  </div>

                `;
                markerInfoWin.setContent(sContent);

                map.value.openInfoWindow(
                  markerInfoWin,
                  new T.LngLat(item.lng, item.lat)
                );
                console.log(item.lng);
                console.log(item.lat);
              }
            });
            markerClusterer.value = new T.MarkerClusterer(map.value, {
              markers: arrayObj,
              styles: [
                {
                  url: "http://api.tianditu.gov.cn/img/map/cluster/cluster0.png",
                  size: [56, 56],
                  offset: new T.Point(-15, -15),
                  textColor: "#fff",
                  textSize: 10,
                  range: [0, 50],
                },
                {
                  url: "http://api.tianditu.gov.cn/img/map/cluster/cluster1.png",
                  size: [56, 56],
                  offset: new T.Point(-15, -15),
                  textColor: "#fff",
                  textSize: 10,
                  range: [50, 500],
                },
                {
                  url: "http://api.tianditu.gov.cn/img/map/cluster/cluster2.png",
                  size: [56, 56],
                  offset: new T.Point(-15, -15),
                  textColor: "white",
                  textSize: 10,
                  range: [500, 1000],
                },
              ],
            });
            markerClusterer.value.setMaxZoom(18);
          };
          onMounted(() => {
            initMap();
          });
        },
      }).mount("#app");
    </script>
  </body>
</html>
